<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <!-- 下面的2行是一个放大缩小的插件，当我们用手机去连接时，可以让其放大缩小，类似于2345浏览器手机版-->
    <link rel="icon" th:href="@{/img/favicon.ico}"/>
    <link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
    <!-- 要用下面的ajax的判断登录是否成功需要引下面的包-->
    <script th:src="@{/webjars/jquery/jquery.min.js}"></script>
</head>
<body>
<!-- 下面的3步是插入图片，然后把文字浮动在上面，属于一种分层叠加的方法-->
<div style="width: 100%; height: 100%;margin: 0 auto;position: absolute; z-index: 1;"></div>
<!-- 设置图片链接，并设置图片的长宽-->
<IMG src="http://cdn.aixifan.com/dotnet/artemis/u/cms/www/201405/011733243tfp.jpg"alt="Pulpit rock" width=100% height=100%>
<!-- 设置文字的位置及颜色。并且调一个name，这个name在控制层已经给定为 幻神 -->
<h1 style="position: absolute;z-index: 2; left:800px; top: 0;color: deepskyblue;">欢迎高沁中登录EVE</h1>
<div style="position: absolute;z-index: 3; left:832px; top: 130px;color: deepskyblue;">
    <form style="border: 1px">
        <div>
            <label for="username" class="col-sm-3 control-label">用户名:</label>
            <div class="col-sm-10" >
                <input id="username" type="text" placeholder="请输入用户名："></div>
            </div>

        <div class="form-group">
            <label for="password" class="col-sm-3 control-label">密  码:</label>
            <div class="col-sm-10">
                <input id="password" type="text" placeholder="请输入密码："></div>
            </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="button" onclick="login()" class="btn btn-default">登录</button>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <div class="checkbox">
                    <label>
                        <input type="checkbox">请记住我
                    </label>
                </div>
            </div>
        </div>


    </form>
</div>
<script type="text/javascript">
    function  login() {
        var username = $('#username').val()
        var password = $('#password').val()
        if (username == ""){
            alert("请输入用户名")
            return false
        }
        if (password == ""){
            alert("请输入密码")
            return false
        }
        $.ajax({
            type: "post",
            url: "/login",
            data: {username:username, password:password},
            dataType: "json",
            success: function(data){
                if (data == "1"){
                    alert("你好舰长")
                    location.href = '/list'//跳转到list页面
                }
                if(data == "2"){
                    alert("密码错误")
                }
                if(data == "3"){
                    alert("用户不存在")
                }
            }
        });
    }
</script>

</body>
</html>